<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>居民健康卡消费查询</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

 

 <script type="text/javascript" src="<%=basePath%>/js/iscroll.js"></script>

  
 
<script type="text/javascript">
var str=new Array(); 
var flag = false;
$(document).ready(function(){
	  $("#input").click(function(){
	//	  $("#li_0").text("");
		  flag = true;
		  var usr = document.getElementById("username").value;
		  var pwd = document.getElementById("password").value;

		  if(usr.length==0 || pwd.length==0){
		  	alert("账号或密码不能为空！");
		  	return;
		  }
		$.ajax({
			url:"queryCard.html",
			type:"post",
			dataType:"json",
			async: false,
			data:{username:$("#username").val(),password:$("#password").val()},
			success:function(data){
				
				if(data.length==0){
					alert("您输入的账号或密码错误！");
					return;
				}

				$(data).each(function(index){
				var	val = data[index];
					
					
			//	alert(val.cash);
			//	alert(data.account1);
				$("#cash").html(val.cash+"元");
				$("#account1").html(val.account1+"元");
				 str[index]="消费日期："+val.tradedate+"   地点"+val.tradeplace+"   金额"+val.tradeamount+"元"+"   明细"+val.tradebrief+"";
				$(".trade").append(str);
				
				 
				});
			},
			error:function() {
				alert("error");		
			}
		
		
		});
			if(str.length==0){
			 	$("#li_0").html("暂无消费记录");
			 	$("#li_1").html("暂无消费记录");
			 	$("#li_2").html("暂无消费记录");
			}
			else if(str.length==1){
				$("#li_0").html(str[0]);
			 	$("#li_1").html("已显示您的所有消费记录");
			 	$("#li_2").html("已显示您的所有消费记录");
			}else if(str.length==2){
				$("#li_0").html(str[0]);
			 	$("#li_1").html(str[1]);
			 	$("#li_2").html("已显示您的所有消费记录");
			}else {
				$("#li_0").html(str[0]);
			 	$("#li_1").html(str[1]);
			 	$("#li_2").html(str[2]);
			}
	
	  });


	var x=3;
$("#btn_click").click(function(){
	var usr = document.getElementById("username").value;
	  var pwd = document.getElementById("password").value;

	  if(usr.length==0 || pwd.length==0){
	  	alert("账号或密码不能为空！");
	  	return;
	  }
	  else if(flag == true){
		flag == false;
	setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
	/*	var el, li, i;
		el = document.getElementById('thelist');

		for (i=0; i<3; i++) {
			li = document.createElement('li');
			li.innerText = '暂无......' ;
			el.appendChild(li, el.childNodes[0]);
		}
		*/
	
	for (var i=x; i<x+3; i++) {	
		if(i>str.length){
			alert("无更多消费记录！");
	//		str[i]="已显示您的所有消费记录";
	//		var html ="<li class='div_append"+i+"' style='background-color:white; height:40px;-webkit-text-size-adjust:none;font-size:12px;' ></li>";
	//		  $("#thelist").append(html);
			//	alert(str.length);
	//		  $(".div_append"+i).html(str[i]);
			  break;
		}
		else{
	     var html ="<li class='div_append"+i+"' style='background-color:white; height:40px;-webkit-text-size-adjust:none;font-size:12px;' >已显示您的所有消费记录</li>";
		  $("#thelist").append(html);
		//	alert(str.length);
		  $(".div_append"+i).html(str[i]);
		}
	}
		x=x+3;
		
		
		// Remember to refresh when contents are loaded (ie: on ajax completion)
	}, 0);
	  }  // <-- Simulate network congestion, remove setTimeout from production!
});

  });

function check(){
	var patt = /^[0-9]{11}$/;
	if(patt.test(document.getElementById("username").value) == false){
		alert("账号请输入11位数字！");
	}
}

</script>

<style type="text/css" media="all">
.form{
  width: 100%;
  margin: 0.3rem auto;
  font-size: 0.7rem;
  td{
    height: 2.5rem;
  }
  input{
    font-family: "Microsoft Yahei";
    outline: none;
    color: #d8d8d8;
  }
  input[type=text],input[type=phone],input[type=email]{
    border: 1px solid #e10000;
    height: 1.55rem;
    line-height: 1.55rem;
    padding-left: 0.4rem;
    width: 100%;
    box-sizing: border-box;
    background: transparent;
  }
  }
ul,li {
	padding:0;
	margin:0;
	border:0;
	
}
#scroller {
	
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	width:100%;
	padding:0;
}

#scroller ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

#scroller li {
	padding:0 10px;
	height:auto;
	line-height:40px;
	border-bottom:1px solid #ccc;
	border-top:1px solid #fff;
	background-color:#fafafa;
	font-size:12px;
}
#btn_click{
	font-size: 12px;
}


</style>
</head>
<body style:"overflow:auto;">

  <div data-role="page" style="">
         <div data-role="content" style="background-color:#ADDD89;padding:0;height:55px;">
         <center> 
         <p  style=" margin-top:10px;font-size:20px;font-weight:bold;text-shadow:none;">居民健康卡</p>
         </center> 
         </div>    
  <div style="margin-top:10px;">
<form method="get">
    <table class="form">
        <tr>
            <td colspan="3"><input onchange="check()" style="background-color:white;" type="text" placeholder="请输入卡号（11位数字）" name="username" id="username"/><span></span></td>
        </tr>
        <tr>
            <td colspan="3"><input style="background-color:white;" type="password" placeholder="请输入密码" name="password" id="password"/><span></span></td>
        </tr>
         </table>
          <div style="margin-left:7%;margin-right:7%;">
          <input style="background-color:#ADDD89;" type="button"  id="input"  value="提交"/>
        
           </div>
            
</form>
</div>
  
  <div data-role="content" style="margin-top:10px;">
         <ul data-role="listview"  >
         <li style="background-color:white;font-size:15px;" >电子现金余额:<div id="cash" style="  height:20px;float:right;margin-right:25%"></div></li>
         <li style="background-color:white;font-size:15px;" >卡内账户余额:<div id="account1" style="height:20px;float:right;margin-right:25%"></div></li>
         </ul>
          </div>
    <div style="margin-top:10px;margin-left:auto;margin-right:auto;"> 
   
   <h1 align="left" style="font-size:15px; margin-top:15px;margin-left:3% ;color:#ADDD89;font-weight:bold">消费记录</h1>

    </div>
   
  
<div id="wrapper" style="margin-top:10px;">
	<div id="scroller" style="" >
	

		<ul id="thelist" >
			<li id="li_0"  >暂无.....</li>
			<li id="li_1" >暂无.....</li>
			<li id="li_2" >暂无.....</li>
			
			
		</ul>

		 <div style="margin-left:25%;margin-right:25%;margin-top:10px;height:40px;background-color:#ADDD89;text-shadow:none;">
		 	<center style="padding-top:10px;">
          <span style=" font-size:16px;margin-top:5px;" id="btn_click" >点击查看更多记录</span>
        </center>
           </div>

	</div>
</div>


 <div data-role="content" style="padding:0;height:40px;">
         <center> 
         <p>以上信息非实时记录，仅供参考</p>
          </center> 
          </div>

</div>
</body>
</html>